<template>
	<view class="page">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 顶部头部区域 -->
		<view class="header">
			<view class="header-content">
				<view class="shop-info">
					<image class="shop-logo" src="/static/index/图层 3@3x.png" mode="aspectFill"></image>
					<view class="shop-text">
						<text class="shop-name">大美汽修厂</text>
						<text class="welcome-text">欢迎您</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 快速操作区域 -->
		<view class="quick-actions">
			<view class="action-btn" @click="scanCode">
				<image class="action-icon" src="/static/index/扫码@3x.png" mode="aspectFit"></image>
				<text class="action-text">扫码核销</text>
			</view>
			<view class="action-btn" @click="inputCode">
				<image class="action-icon" src="/static/index/输入2@3x.png" mode="aspectFit"></image>
				<text class="action-text">输入核销码</text>
			</view>
		</view>
		
		<!-- 功能导航网格 -->
		<view class="nav-grid">
			<view class="nav-item" @click="navigateTo('statistics')">
				<view class="nav-icon statistics">
					<image src="/static/index/统计@3x.png" mode="aspectFit"></image>
				</view>
				<text class="nav-text">经营统计</text>
			</view>
			<view class="nav-item" @click="navigateTo('verification')">
				<view class="nav-icon verification">
					<image src="/static/index/核销记录 (1)@3x.png" mode="aspectFit"></image>
				</view>
				<text class="nav-text">核销记录</text>
			</view>
			<view class="nav-item" @click="navigateTo('finance')">
				<view class="nav-icon finance">
					<image src="/static/index/123收支明细@3x.png" mode="aspectFit"></image>
				</view>
				<text class="nav-text">收支明细</text>
			</view>
			<view class="nav-item" @click="navigateTo('coupon')">
				<view class="nav-icon coupon">
					<image src="/static/index/卡券@3x.png" mode="aspectFit"></image>
				</view>
				<text class="nav-text">卡券管理</text>
			</view>
			<view class="nav-item" @click="navigateTo('maintenance')">
				<view class="nav-icon maintenance">
					<image src="/static/index/维修@3x.png" mode="aspectFit"></image>
					<view class="badge" v-if="maintenanceCount > 0">{{ maintenanceCount }}</view>
				</view>
				<text class="nav-text">维修任务</text>
			</view>
			<view class="nav-item" @click="navigateTo('reviews')">
				<view class="nav-icon reviews">
					<image src="/static/index/评价管理@3x.png" mode="aspectFit"></image>
				</view>
				<text class="nav-text">评价管理</text>
			</view>
			<view class="nav-item" @click="navigateTo('activities')">
				<view class="nav-icon activities">
					<image src="/static/index/活动@3x.png" mode="aspectFit"></image>
				</view>
				<text class="nav-text">活动发布</text>
			</view>
			<view class="nav-item" @click="navigateTo('orders')">
				<view class="nav-icon orders">
					<image src="/static/index/订单管理@3x.png" mode="aspectFit"></image>
				</view>
				<text class="nav-text">订单管理</text>
			</view>
			<view class="nav-item" @click="navigateTo('merchant-info')">
				<view class="nav-icon profile">
					<image src="/static/index/资料库@3x.png" mode="aspectFit"></image>
				</view>
				<text class="nav-text">商户资料</text>
			</view>
		</view>
		
		<!-- 最新通知区域 -->
		<view class="notifications">
			<view class="notifications-header">
				<view class="notifications-title">
					<image class="title-icon" src="/static/index/消息-信息@3x.png" mode="aspectFit"></image>
					<text class="title-text">最新通知</text>
				</view>
				<view class="task-reminder" @click="navigateTo('pickup-tasks')">
					<text class="reminder-text">今日需上门取车任务共{{ pickupTaskCount }}单</text>
					<image class="arrow-icon" src="/static/index/收起箭头小@3x.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="notifications-list">
				<view class="notification-item" v-for="(item, index) in notifications" :key="index">
					<view class="notification-content">
						<text class="user-name">{{ item.user }}</text>
						<text class="service-item">{{ item.service }}</text>
						<text class="time">{{ item.time }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				maintenanceCount: 4,
				pickupTaskCount: 32,
				notifications: [
					{
						user: '张先生',
						service: '汽车美容、基础保养',
						time: '2022-03-10 11:09'
					},
					{
						user: '张先生',
						service: '汽车精细',
						time: '2022-03-10 11:09'
					},
					{
						user: '张先生',
						service: '车辆维修-上门取车',
						time: '2022-03-10 11:09'
					},
					{
						user: '张先生',
						service: '汽车美容、基础保养',
						time: '2022-03-10 11:09'
					},
					{
						user: '张先生',
						service: '车辆维修-到店维修',
						time: '2022-03-10 11:09'
					}
				]
			}
		},
		onLoad() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
		},
		methods: {
			// 扫码核销
			scanCode() {
				uni.showToast({
					title: '扫码核销功能',
					icon: 'none'
				});
				uni.navigateTo({
					url:"/pages/voucherCode/voucherCode"
				})
				// TODO: 实现扫码功能
			},
			
			// 输入核销码
			inputCode() {
				uni.showToast({
					title: '输入核销码功能',
					icon: 'none'
				});
				// TODO: 实现输入核销码功能
				uni.navigateTo({
					url:"/pages/voucherCode/voucherCode"
				})
				// TODO: 实现扫码功能
			},
			
			// 导航跳转
			navigateTo(page) {
				const pageMap = {
					//主页功能跳转路径，自行修改
					'statistics': '/pages/businessStatis/statistics/statistics',//经营统计
					'verification': '/pages/writeoff_records/writeoff_records/writeoff_records',//核销记录
					'finance': '/pages/businessStatis/IncomeDetails/IncomeDetails',//收支明细
					'coupon': '/pages/coupon-management/coupon/coupon',//卡券管理
					'maintenance': '/pages/repairTask/repairTask/repairTask',//维修任务
					'reviews': '/pages/performanc-management/performance/performance',//评价管理
					'activities': '/pages/activity/activitycontent/activitycontent',//活动发布
					'orders': '/pages/oder-management/order/order',//订单管理
					'merchant-info': '/pages/merchant/merchant-information/merchant-information',//商户资料
					'pickup-tasks': '/pages/pickup-tasks/pickup-tasks'//最新通知
				};
				
				const targetPage = pageMap[page];
				if (targetPage) {
					uni.navigateTo({
						url: targetPage,
						fail: () => {
							uni.showToast({
								title: `${page}页面开发中`,
								icon: 'none'
							});
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
	.page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.status-bar {
		background-color: #007AFF;
	}
	
	/* 头部样式 */
	.header {
		background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
		padding: 20rpx 30rpx 40rpx;
	}
	
	.header-content {
		display: flex;
		align-items: center;
	}
	
	.shop-info {
		display: flex;
		align-items: center;
	}
	
	.shop-logo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
		background-color: #fff;
	}
	
	.shop-text {
		display: flex;
		flex-direction: column;
	}
	
	.shop-name {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}
	
	.welcome-text {
		color: #fff;
		font-size: 28rpx;
		opacity: 0.9;
	}
	
	/* 快速操作区域 */
	.quick-actions {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.action-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		padding: 20rpx;
	}
	
	.action-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 16rpx;
	}
	
	.action-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
	
	/* 导航网格 */
	.nav-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		padding: 30rpx;
		background-color: #fff;
		margin: 0 30rpx 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15rpx;
		position: relative;
	}
	
	.nav-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12rpx;
		position: relative;
	}
	
	.nav-icon image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.nav-icon.statistics {
		background-color: #007AFF;
	}
	
	.nav-icon.verification {
		background-color: #FF9500;
	}
	
	.nav-icon.finance {
		background-color: #007AFF;
	}
	
	.nav-icon.coupon {
		background-color: #007AFF;
	}
	
	.nav-icon.maintenance {
		background-color: #34C759;
	}
	
	.nav-icon.reviews {
		background-color: #FF3B30;
	}
	
	.nav-icon.activities {
		background-color: #FF9500;
	}
	
	.nav-icon.orders {
		background-color: #007AFF;
	}
	
	.nav-icon.profile {
		background-color: #007AFF;
	}
	
	.badge {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		background-color: #FF3B30;
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 20rpx;
		min-width: 32rpx;
		text-align: center;
		line-height: 1;
	}
	
	.nav-text {
		font-size: 22rpx;
		color: #333;
		text-align: center;
		line-height: 1.2;
	}
	
	/* 通知区域 */
	.notifications {
		background-color: #fff;
		margin: 0 30rpx 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}
	
	.notifications-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.notifications-title {
		display: flex;
		align-items: center;
	}
	
	.title-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}
	
	.title-text {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}
	
	.task-reminder {
		display: flex;
		align-items: center;
	}
	
	.reminder-text {
		font-size: 24rpx;
		color: #FF3B30;
		margin-right: 8rpx;
	}
	
	.arrow-icon {
		width: 16rpx;
		height: 16rpx;
		transform: rotate(90deg);
	}
	
	.notifications-list {
		padding: 0 30rpx 30rpx;
	}
	
	.notification-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.notification-item:last-child {
		border-bottom: none;
	}
	
	.notification-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.user-name {
		font-size: 28rpx;
		color: #333;
		width: 120rpx;
	}
	
	.service-item {
		font-size: 28rpx;
		color: #666;
		flex: 1;
		margin: 0 20rpx;
	}
	
	.time {
		font-size: 24rpx;
		color: #999;
		width: 200rpx;
		text-align: right;
	}
</style>
